<template>
  <el-card v-loading="quillUpdateImg">
    <div slot="header" class="clearfix" style="text-align: center;">
      <el-button style="float: left; padding: 3px 0" class="el-icon-arrow-left" type="text" @click="$router.go(-1)">返回</el-button>
      <span > {{moduleTitle}}</span>
      <el-button style="float: right; padding: 3px 0" class="el-icon-check" type="text" @click="submit">提交</el-button>
    </div>
			<el-form ref="editor" :model="editor" :rules="rules"  label-position="right">
			  <!-- <el-form-item class="form-item-title" prop="editor_title" label="文章标题："> -->
			    <!-- <el-input v-model="editor.editor_title" placeholder="文章标题" @change="handleEditorChange"/> -->
			  <!-- </el-form-item> -->
			  <el-form-item class="form-item-content" prop="editor_content" label="">
			    <quill-editor class="editor"  v-model="editor.editor_content" ref="myQuillEditor" :options="editorOption"
			      @change="handleEditorChange">
			    </quill-editor>
			  </el-form-item>
			  
			  
			</el-form>
		
   
    <!-- <el-upload
      class="avatar-uploader"
      action
      name="pic"
      :show-file-list="false"
      :http-request="handleUpload">
    </el-upload> -->
	<cutImageDialog @formData="handleUpload" :aspectRatio="16/9" :isShow="false"/>
	
  </el-card>
</template>
<script>
// 工具栏配置
const toolbarOptions = [
  ['bold', 'italic',], // 加粗 斜体 下划线 删除线
  [ 'underline', 'strike'],
  ['blockquote', 'code-block',], // 引用  代码块
  [{ list: 'ordered' }, { list: 'bullet' }],
  [{ header: 1 }, { header: 2 },], // 1、2 级标题
   // 有序、无序列表
  [{ script: 'sub' }, { script: 'super' }], // 上标/下标
  [{ indent: '-1' }, { indent: '+1' },],
  [{ align: [] },'clean'], // 缩进
  // [{'direction': 'rtl'}],  
	[{ color: [] }, { background: [] },], // 字体颜色、字体背景颜色// 文本方向
  ['link', 'image'], // 字体大小
  [{ header: [1, 2, 3, 4, 5, 6, false] },], // 标题
	[{ size: ['small', false, 'large', 'huge'] }],
	[],[],
  [{ font: [] }], // 字体种类
   
]

	import cutImageDialog  from '../components/cut.vue' 
export default {
	components: {
		  cutImageDialog
		},
  props: {
	  mheight: {
		 type:String,
		 default:'height:200px'
	  },
    loading: false,
    moduleTitle: {  // 编辑器标题
      type: String,
      default: '富文本编辑器'
    },
    uploadApi: {  // 文件服务器上传接口
      type: String,
      default: ''
    },
    downloadApi: { // 文件服务器下载接口
      type: String,
      default: ''
    },
   
    content: { // 文本内容
      type: String,
      default: ''
    },
    maxSize: { // 文本大小
      type: Number,
      default: 4000 // 单位：kb
    },
		maxMessage:{
			type: Number,
			default: 10000 // 单位：字数
		}
  },
  data () {
    return {
	contentShow:"",
      quillUpdateImg: this.loading, // 根据图片上传状态来确定是否显示loading动画
      editor: { // 编辑器中数据
        editor_content: this.content
      },
      rules: { // 表单校验规则
        // editor_title: [{required: true, message: '请输入文章标题'}, {max: 100, message: '长度不超过100个字符'}],
        editor_content: [{required: true, message: '请输入文章内容'}, {max: this.maxMessage, message: '长度不超过'+ this.maxMessage+'个字符'}]
      },
      editorOption: { // 编辑框操作事件
        theme: 'snow', // or 'bubble'
        placeholder: '输入：',
        modules: {
				// 新增下面
		imageDrop: true, //图片拖拽
		  imageResize: {
			displaySize: true
		  },
          toolbar: {
            container: toolbarOptions,
            // container: '#toolbar',
            handlers: {
              image: function (value) { // 上传图片
                if (value) {
                  document.querySelector('.show').click()  // 触发input框选择图片文件
                } else {
                  this.quill.format('image', false)
                }
              },
              link: function (value) { // 添加链接
                if (value) {
                  var href = prompt('请输入url')
                  this.quill.format('link', href)
                } else {
                  this.quill.format('link', false)
                }
              }
            }
          }
        }
      }
    }
  },
  methods: {
    handleEditorChange () { // 编辑器中内容改变时，触发的事件。冒泡到父组件，参数为编辑器中内容
			let content = this.editor.editor_content;
			// const regex = new RegExp('<img', 'gi')
			// this.contentShow = content.replace(regex, `<img style="max-width: 50%; height: auto"`)
			 
			this.$emit('editor-change', content)
    },
    handleUpload (val) { // 上传图片
      
      // let file = new FormData()
      // file.append('file', param.file)
      this.quillUpdateImg = true
      this.$axios({
		  method: "post",//指定请求方式
		  url: this.uploadApi,
		  data: val
	  }
      ).then((res) => {
		  
        if (res.data.code === 200) {
			 this.$emit("do-picture",res.data.data)
          let quill = this.$refs.myQuillEditor.quill // 获取富文本组件实例
          let length = quill.getSelection().index // 获取光标所在位置
          quill.insertEmbed(length, 'image', this.downloadApi + res.data.data) // 插入图片  res.url为服务器返回的图片地址
          quill.setSelection(length + 1) // 调整光标到最后
        } else {
          this.$message.error('上传失败：'+res.data.msg)
        }
        this.quillUpdateImg = false
      }).catch(e=>{
		  this.$message.error('上传失败')
		  this.quillUpdateImg = false
	  })
    },
    submit () { // 提交，冒泡到父组件处理
	let self = this
      this.$refs.editor.validate(valid => {
        if (valid) {
          this.$emit("do-submit",self.editor)
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
	
  .el-card {
    height: 100%;
	box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
     >>> .el-card__header {
      padding: 10px;
    }
    >>> .el-card__body {
      padding: 10px;
      overflow: auto;
      height: calc(100% - 60px);
      .el-form {
        height: 100%;
       >>> .el-form-item {
          margin-bottom: 20px;
        }
       .form-item-title {
          height: 40px;
          line-height: 40px;
        }
       .form-item-content {
          height: calc(100% - 60px - 20px);
         .el-form-item__content {
            height: 100%;
          }
         .editor {
            height: 100%;
            line-height: normal !important;
           .ql-toolbar {
              // height: 120px;
              padding: 10px;
              text-align: left;
            }
         .ql-container {
			 padding: 20px;
              overflow: auto;
			  
			  height: 300px;
              // height: calc(100% - 120px);
            }
          }
        }
      }
      // .ql-snow img {
        
      //   	    max-width: 50%; /*图片自适应宽度*/
        	
      // }
      .ql-snow .ql-tooltip[data-mode=link]::before {
        content: '请输入链接地址:';
      }
      .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
          border-right: 0px;
          content: '保存';
          padding-right: 0px;
      }

      .ql-snow .ql-tooltip[data-mode=video]::before {
          content: '请输入视频地址:';
      }

      .ql-snow .ql-picker.ql-size .ql-picker-label::before,
      .ql-snow .ql-picker.ql-size .ql-picker-item::before {
        content: '14px';
      }
      .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
      .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
        content: '10px';
      }
      .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
      .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
        content: '18px';
      }
      .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
      .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
        content: '32px';
      }

      .ql-snow .ql-picker.ql-header .ql-picker-label::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item::before {
        content: '文本';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
        content: '标题1';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
        content: '标题2';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
        content: '标题3';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
        content: '标题4';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
        content: '标题5';
      }
      .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
      .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
        content: '标题6';
      }

      .ql-snow .ql-picker.ql-font .ql-picker-label::before,
      .ql-snow .ql-picker.ql-font .ql-picker-item::before {
        content: '标准字体';
      }
      .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
      .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
        content: '衬线字体';
      }
      .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
      .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
        content: '等宽字体';
      }
    }
  }
</style>

